<template>
  <div>
      <v-row>
          <v-col cols="12" md="4">
            <v-text-field
            v-model="form.id"
            label="学号"
            outlined
            ></v-text-field>
            <v-text-field
            v-model="form.name"
            label="姓名"
            outlined
            ></v-text-field>
            <v-text-field
            v-model="form.mclass"
            label="班级"
            outlined
            ></v-text-field>
          </v-col>
          <v-col cols="12" md="4">
            <v-text-field
            v-model="form.TimePicker"
            label="出生日期"
            outlined
            @click="TimePickerShow = !TimePickerShow"
            ></v-text-field>
            <div class="picker-holder">
                <div style="position: absolute;">
                <v-date-picker 
                v-model="form.TimePicker" 
                v-if="TimePickerShow"
                ></v-date-picker>
                </div>
            </div>
            <v-text-field
            v-model="form.tel"
            label="电话"
            outlined
            ></v-text-field>
          </v-col>
          <v-col cols="12" md="4">
              <v-file-input
              show-size
              :rules="rules"
              accept="image/*" 
              label="上传学生头像"
              prepend-icon="mdi-camera"
              @change="FileInputHandler"
              ></v-file-input>
          </v-col>
      </v-row>
      <v-row>
        <v-col>
            <v-btn color="primary" @click="submit">提交学生信息</v-btn>
        </v-col>
      </v-row>
    <v-dialog
    v-model="errorDialog"
    width="500"
    >
        <v-card>
            <v-card-title class="headline">{{ errormsg }}</v-card-title>
            <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
            color="primary"
            text
            @click="errorDialog = false"
            >了解</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
    name: "AddStudent",

    data: ()=>({
        TimePickerShow: false,
        errorDialog: false,
        errormsg: "",
        form: {
            id: "",
            name: "",
            mclass: "",
            TimePicker: "1998-1-1",
            file: "",
            tel: "",
        },
        rules: [
            value => !value || value.size < 2000000 || '图片大小别超过2 MB',
        ],
    }),

    methods: {
        FileInputHandler(file) {
            this.form.file = file
        },
        submit() {
            let formData = new FormData()
            for (let k in this.form) {
                formData.append(k, this.form[k])
                if (this.form[k] == "" || this.form[k] == null) {
                    this.errormsg = "信息不完整"
                    this.errorDialog = true
                    return
                }
            }
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                } 
            }
            this.$axios.post('/api/AddStudent.php', formData, config)
            .then((res)=>{
                console.log(res.data)
                if (res.data == "need_login") {
                    this.$bus.$emit('showLoginDialogEvent', true)
                } else if (res.data == "ok") {
                    this.errormsg = "成功"
                    this.errorDialog = true
                } else {
                    this.errormsg = "失败"
                    this.errorDialog = true
                }
            }).catch((e)=>{
                console.log(e)
                this.errormsg = "失败:网络错误"
                this.errorDialog = true
            })
        }
    },
}
</script>

<style scoped>
.picker-holder {
    position: relative;
    z-index: 9999;
}
</style>